// pages/test/test.js
const computedBehavior = require('miniprogram-computed').behavior
Page({
behaviors:[computedBehavior],
  /**
   * 页面的初始数据
   */
  data: {
    // 购物车计数案例数据
    shopping: {
      num: 1,
      pattern: '^[1-9]{1,2}$'
    },
    // 列表渲染数据
    students: [],
    //水果列表数据
    fruitList: [],
    fruitName: ''
  },
  computed:{
    total(data){
      return data.fruitList.length
    }
  },

  /**
   * 购物车计数案例业务逻辑
   */
  // 增
  decrement() {
    const num = this.data.shopping.num
    if (num >= 99) return
    this.setData({
      'shopping.num': this.data.shopping.num + 1
    })
  },
  // 减
  increment() {
    const num = this.data.shopping.num
    if (num <= 1) return
    this.setData({
      'shopping.num': num - 1
    })
  },
  // 确认 数字输入校验
  onConfirm(e) {
    const {
      value
    } = e.detail
    if (this.checkPattern(value)) {
      this.setData({
        'shopping.num': parseInt(value)
      })
    } else {
      wx.showToast({
        title: "请输入1-99之间的正整数",
        icon: "none",
        duration: 2000
      });
      this.setData({
        'shopping.num': 1
      })
    }
  },
  // 校验方法
  checkPattern(str) {
    return new RegExp(this.data.shopping.pattern).test(str);
  },
  // 加载
  onLoad() {
    this.getStudentList()
    const list = [
      {
        id: 1,
        name: '香蕉'
      },
      {
        id: 2,
        name: '苹果'
      },
      {
        id: 3,
        name: '西瓜'
      },
      {
        id: 4,
        name: '草莓'
      },
      {
        id: 5,
        name: '橘子'
      },
      {
        id: 6,
        name: '葡萄'
      },
      {
        id: 7,
        name: '柠檬'
      },
      {
        id: 8,
        name: '菠萝'
      },
      {
        id: 9,
        name: '火龙果'
      },
      {
        id: 10,
        name: '哈密瓜'
      }
    ]
    wx.getStorage({
      key:'fruit',
      success:(res)=>{
        this.setData({
          fruitList:res.data
        })
      },
      fail:()=>{
        this.setData({
          fruitList:[...this.data.fruitList,...list]
        })
      }
    })
    
  },
  getStudentList() {
    wx.showLoading({
      title: '正在加载...',
      mask: true
    })

    wx.request({
      url: 'https://mock.boxuegu.com/mock/3293/students',
      method: 'get',
      success: (res) => {
        this.setData({
          students: res.data.result
        })
      },
      complete() {
        wx.hideLoading()
      }
    })
  },
  /**
   * 水果列表案例业务
   */
  // 解决双向绑定的警告问题
  none() {},
  // 添加水果
  addFruit() {
    const fruitName = this.data.fruitName.trim(); // 去掉首尾空格
    const flag = !this.data.fruitList.find(v => v.name === fruitName)
    if (!flag || !fruitName) {
      wx.showToast({
        title: `${!flag ? '请不要重复添加' : '请输入水果名称'}`,
        icon: 'error',
        mask: true
      })
      return
    }
    const newItem = {
      id: (Date.now()).toString().slice(-4),
      name: fruitName
    };
    this.setData({
      fruitList: [...this.data.fruitList, newItem],
      fruitName: '' // 清空输入框
    });
    wx.showToast({
      title: '添加成功!',
      icon: 'success',
      mask: true
    })
    wx.setStorage({key:"fruit",data:this.data.fruitList})
  },
  // 删除水果
  delFruit(e) {
    //确认弹窗
    wx.showModal({
      title: '删除确认',
      content: '是否确认删除该水果？',
      complete: (res) => {
        // 取消
        if (res.cancel) {
          wx.showToast({
            title: '已取消删除',
            icon:'none',
            mask: true
          })
        }
        // 确认
        if (res.confirm) {
            //删除逻辑
            const id = e.detail
              this.setData({
                fruitList: this.data.fruitList.filter(v => v.id !== id)
              })
            // 提示
            wx.showToast({
              title: '删除成功',
              icon: 'success',
              mask: true
            })
            wx.setStorage({key:"fruit",data:this.data.fruitList})
        }
      }
    })
  }
})